<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>漫画喵</title>
	<link href="css/metro.min.css" rel="stylesheet" media="screen">
	<script src="js/jquery.min.js"></script>
	<script src="js/metro.min.js"></script>
	<style>
		.list a {
			color: white;
			font-size: 16px;
		}
	</style>
</head>
<body class="bg-grayLighter">
	<h1 style="margin: 20px auto 20px 20px">自己的漫画站点</h1>
	<div style="margin-left: 20px">
		<p>开始你的漫画之旅</p>
		<p>这是一个十分简易的用于本地浏览的漫画的网站，希望你能喜欢</p>
	</div>
	<div class="listview list-type-tiles" id='list'></div>
	<div data-role="dialog" id="dialog" class="padding20 dialog" data-close-button="true" data-overlay="true" data-overlay-color="op-dark" data-overlay-click-close="true" style="width: auto; height: auto; visibility: visible; left: 493px; top: 123.5px;">
		<h1>Wrong</h1>
		<p id="wrong-content">
		</p>
		<span class="dialog-close-button"></span>
	</div>
</body>
<script>
	$(function () {
	    var host = window.location.host;
		$.getJSON('http://'+ host + '/get_cartoon_list', function (data) {
		    if (data['code'] != 0) {
                metroDialog.open('#dialog');
                return;
			}
			var cartoon_list = data['cartoon'];
			var list = $('#list');
			cartoon_list.forEach(function(data) {
				list.append('<div class="list bg-grayLight"><a href="cartoon.html?cartoon=' + data + '" target="_blank"><span class="list-title">'+ data +'</span></a></div>');
			});
		});
	});
</script>
</html>